<!--
 * @Date: 2025-06-30 17:57:06
 * @LastEditTime: 2025-07-04 10:46:25
-->
<template>
  <div class="info-confirm-wrapper">
    <div class="info-confirm-section">
      <div class="info-row">
        <span class="info-label">任务名称：</span>
        <span class="info-value">{{baseConfig.flowName}}</span>
      </div>
      <div class="info-row">
        <span class="info-label">任务描述：</span>
        <span class="info-value">{{baseConfig.flowDesc}}</span>
      </div>
      <div class="info-row">
        <span class="info-label">应用评估任务：</span>
        <span class="info-value">{{baseConfig.collectFlowName}}</span>
      </div>
      <div class="info-row">
        <span class="info-label">目标数据源：</span>
        <img
          src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg"
          alt="mysql"
          class="info-icon"
        />
        <span class="info-value">{{baseConfig.db_alias_name}}</span>
      </div>
      <div class="info-row">
        <span class="info-label">程序执行节点：</span>

        <span class="info-value">{{baseConfig.db_alias_name}}</span>
      </div>
    </div>

    <div class="info-confirm-section">
      <div class="info-row">
        <span class="info-label">评估对象：</span>
        <div class="info-checkbox-group">
          <a-transfer
            disabled
            v-model:target-keys="targetKeys"
            :data-source="mapping"
            :titles="['未选评估对象', '已选择评估对象']"
            :render="(item) => item.operateResources"
            :list-style="{ width: '400px', height: '400px' }"
          />
        </div>
      </div>
    </div>

  </div>
  <div class="flex justify-center">
    <a-button type="primary" @click="prev" style="margin-right: 10px"
      >上一步</a-button
    >
    <a-button type="primary" @click="next">完成</a-button>
  </div>
  <verifyLog ref="verifyLogRef" />
</template>

<script setup>
import {
  Checkbox as ACheckbox,
  Radio as ARadio,
  RadioGroup as ARadioGroup,
  message,
  Modal
} from "ant-design-vue";
import { ref, defineEmits, onMounted, reactive ,} from "vue";
import * as http from "@/api/flow/createTask";
import verifyLog from "./startauto.vue";
import { useStore } from "vuex";
const store = useStore();

const next = () => {
  if (verifyLogRef.value) {
    verifyLogRef.value.openModel(1);
  }
};
const prev = () => {
  emit("prev");
};
const verifyLogRef = ref();
const emit = defineEmits(["next", "prev"]);
const mapping = ref([]);
const targetKeys = ref([]);
const detailConfig = reactive({
  thread: 1,
  timeType: "0",
  startTime: null,
  endTime: null,
  sensitiveType: "0",
  rows: 1000,
});
const baseConfig = ref({})
// 查询获取数据
const queryConfig = async () => {
  let params = {
    flowId: store.state.taskInfo.migrationFlowId,
  };
  let res = await http.queryMigrationConfig(params);
  try {
    if (res.code === "000000") {
      // 第一步信息
      baseConfig.value = res.data.baseConfig;
      getDataSourcePageInfo()
     

      // 评估对象范围
      mapping.value = res.data.mapping;
      mapping.value.forEach((item) => {
        item.key = item.operateResources;
        if (item.isSelect === 1) {
          targetKeys.value.push(item.operateResources);
        }
      });

    }
  } catch (error) {
    console.log(error);
  }
};
// 获取数据源
const getDataSourcePageInfo = async () => {
  let params = {
    userID:window.sessionStorage.getItem("userId"),
    // groupId:1,
    db_id:baseConfig.value.dbId,
    engineID:''
    
  }
  let res = await http.getDataSourcePageInfo(params);
  try {
    baseConfig.value.db_alias_name = res.data.rows[0].db_alias_name
  } catch (error) {
    console.log(error);
    message.error(error);
  }
};

onMounted(() => {
  queryConfig();
});
</script>

<style scoped>
.info-confirm-wrapper {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 0 32px 0;
}
.info-confirm-section {
  margin-bottom: 36px;
}
.info-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.info-label {
  color: #222;
  font-weight: 500;
  min-width: 120px;
  margin-right: 16px;
  display: inline-block;
  text-align: right;
  font-size: 16px;
}
.info-value {
  margin-right: 48px;
  min-width: 80px;
  color: #333;
  font-size: 16px;
}
.info-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  margin-top: 2px;
  max-width: 900px;
}
.adv-section {
  margin-bottom: 40px;
}
.adv-title {
  font-weight: 600;
  font-size: 17px;
  color: #1890ff;
  margin-bottom: 18px;
}
.adv-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 64px;
  margin-bottom: 12px;
}
.adv-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.adv-label {
  color: #444;
  font-weight: 500;
  min-width: 90px;
  margin-right: 8px;
  font-size: 15px;
}
.adv-value {
  color: #222;
  font-size: 15px;
}
.info-icon {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  margin-right: 6px;
}
@media (max-width: 900px) {
  .info-confirm-wrapper {
    padding: 18px 4vw 8px 4vw;
  }
  .info-label {
    min-width: 90px;
    font-size: 15px;
  }
  .info-checkbox-group {
    max-width: 100vw;
    gap: 12px 12px;
  }
  .adv-row {
    gap: 16px 16px;
  }
}
</style>